import React from "react"
import { ReactNode } from "react"
import { CSSTransition } from "react-transition-group"
import { CSSTransitionProps } from "react-transition-group/CSSTransition"


type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right'

/*
    这里报错了，因为我们最早使用的interface，
    但是CSSTransitionProps源码定义的不是一个接口，
    而是一个type，所以这里得用type继承
*/

type TransitionProps = CSSTransitionProps & {
    animation?: AnimationName,
    wrapper?: boolean,
    children?: ReactNode
}

const Transition = ({
    children,
    animation,
    classNames,
    wrapper,
    appear = true,
    unmountOnExit = true,
    ...restProps
}:TransitionProps) => {
    const nodeRef = React.useRef(null);
    // console.log(appear,unmountOnExit);
    
    return wrapper ? (
        <CSSTransition
            appear={appear}
            unmountOnExit={unmountOnExit}
            nodeRef={nodeRef}
            classNames = { classNames ? classNames : animation}
            {...restProps}
            >
            <div ref={nodeRef}>{children}</div>
        </CSSTransition>
    ) : (
        <CSSTransition
            appear={appear}
            unmountOnExit={unmountOnExit}
            classNames = { classNames ? classNames : animation}
            {...restProps}
        >
            { children }
        </CSSTransition>
    )
}

export default Transition